import { defineConfig } from "vite";
import vue from "@vitejs/plugin-vue";
import { resolve } from "path";

// https://vitejs.dev/config/
export default defineConfig({
  /******配置插件******/
  plugins: [vue()],
  /******配置模块解析规则******/
  resolve: {
    alias: {
      "@": resolve(__dirname, "src") // 设置 `@` 指向 `src` 目录
    }
  },
  /*****配置项目构建******/
  build: {
    outDir: "dist", // 构建输出目录
    assetsDir: "./static", // 资源存放目录
    sourcemap: true, // 是否生成 source map
    cssCodeSplit: true, // 如果设置为false，整个项目中的所有 CSS 将被提取到一个 CSS 文件中
    minify: "terser", // 是否压缩代码
    terserOptions: {
      compress: {
        drop_console: true, // 打包时删除console
        drop_debugger: true // 打包时删除 debugger
      },
      output: {
        comments: true // 去掉注释内容
      }
    },
    rollupOptions: {
      output: {
        manualChunks: {
          // 拆分代码，这个就是分包，配置完后自动按需加载。
          vue: ["vue", "vue-router", "vuex"],
          elementPlus: ["element-plus"]
        },
        // 打包时，不同文件分别输出对应资源文件中的文件夹
        chunkFileNames: "static/js/[name]-[hash].js",
        entryFileNames: "static/js/[name]-[hash].js",
        assetFileNames: "static/[ext]/[name]-[hash].[ext]"
      }
    }
  },
  /******配置服务器******/
  server: {
    port: 8080, // 设置服务启动端口号
    open: false, // 设置服务启动时是否自动打开浏览器
    cors: true, // 允许跨域
    // 设置代理，根据项目实际情况配置
    proxy: {
      "/api": {
        target: "http://xxx", // 接口地址服务器
        changeOrigin: true, // 是否允许不同源
        secure: false, // 支持https
        rewrite: path => path.replace(/^\/api/, "")
      }
    }
  },
  /*****配置CSS相关的选项********/
  css: {
    preprocessorOptions: {
      scss: {
        // 引入全局 SCSS 文件
        additionalData: `
          @use "@/assets/css/mixin.scss" as *;
          @use "@/assets/css/variate.scss" as *;
          `
      },
    }
  }
});
